<script setup>
import { onMounted } from 'vue'
import { getCategory } from '@/api/category.js'
import { ref } from 'vue'
defineOptions({
  name: 'ShopCategory'
})
const activeName = ref('0')
const active = ref('0')
const categories = ref([])
const list = ref([])
onMounted(async () => init())

const init = async (obj) => {
  const res = await getCategory(obj)
  categories.value = res.categories
  list.value = res.goods.data
}

const filterName = ref('sales')
const cid = ref(2)
const flush = async (id) => {
  if (!isNaN(Number(id))) cid.value = id
  const obj = {
    category_id: cid.value,
    sales: 0,
    price: 0,
    comments_count: 0
  }
  obj[filterName.value] = 1
  init(obj)
}
</script>

<template>
  <div>
    <van-row justify="between">
      <van-col class="bol" span="9">
        <van-collapse v-model="activeName" accordion>
          <van-collapse-item
            v-for="item in categories"
            :key="item.id"
            :title="item.name"
            :name="item.id"
          >
            <van-sidebar v-model="active">
              <van-sidebar-item
                :title="value.name"
                v-for="value in item.children"
                :key="value.id"
                @click="flush(value.id)"
              />
            </van-sidebar>
          </van-collapse-item>
        </van-collapse>
      </van-col>
      <van-col class="bol" span="15">
        <van-tabs v-model:active="filterName" @change="flush" color="red">
          <van-tab title="销售排序" name="sales"></van-tab>
          <van-tab title="价格排序" name="price"></van-tab>
          <van-tab title="评论排序" name="comments_count"></van-tab>
        </van-tabs>
        <van-card
          class="cards"
          @click="$router.push(`/detail/${item.id}`)"
          v-for="item in list"
          :key="item.id"
          :num="item.sales"
          tag="流行"
          :price="item.price"
          :desc="item.updated_at"
          :title="item.title"
          :thumb="item.cover_url"
        />
      </van-col>
    </van-row>
  </div>
</template>

<style scoped>
.bol {
  height: 100vh;
  overflow: auto;
}
</style>
